<template>
  <div class="box_">
    <el-card class="box_">
      <el-row type="flex" justify="end" class="btn_box">
        <el-button
          @click="add_unit"
          class="el-icon-plus"
          type="success"
          size="mini"
        >&nbsp;&nbsp;添加单位</el-button>
        <el-button
          @click="add_user"
          class="el-icon-user"
          type="success"
          size="mini"
        >&nbsp;&nbsp;添加用户</el-button>
      </el-row>

      <el-table @expand-change="expand_" border :data="tableData" stripe style="width: 100%">
        <el-table-column type="expand">
          <template slot-scope="info">
            <div class="loading_box" v-loading="!info.row.lock">
              <!-- {{info.row.user_list}} -->
              <el-table
                v-if="info.row.lock"
                border
                :data="info.row.user_list"
                stripe
                style="width: 100%"
              >
                <el-table-column prop="username" label="用户名称"></el-table-column>
                <!-- 
                <el-table-column prop="isAble" label="是否开启用户">
                  <template slot-scope="info2">
                    {{info2.row}}
                    <div>
                      <el-tooltip :content="'Switch value: ' + info2.row.isAble" placement="top">
                        <el-switch
                          v-model="info2.row.isAble"
                          active-color="#13ce66"
                          inactive-color="#ff4949"
                          active-value="100"
                          inactive-value="0"
                        ></el-switch>
                      </el-tooltip>
                    </div>
                  </template>
                </el-table-column>-->

                <el-table-column label="权限">
                  <template slot-scope="info2">
                    <div :key="k" v-for="(item,k) in roly">
                      <el-tag v-show="info2.row.type == item.id">{{ item.description }}</el-tag>
                    </div>
                  </template>
                </el-table-column>

                <el-table-column prop="createDate" label="创建时间">
                  <!-- <el-select v-model="roly_id" placeholder="请选择">
                    <el-option
                      v-for="item in roly"
                      :key="item.id"
                      :label="item.description"
                      :value="item.id"
                    ></el-option>
                  </el-select>-->
                </el-table-column>
                <el-table-column label="操作用户">
                  <template slot-scope="info4">
                    <el-button
                      type="primary"
                      @click="update_user(info4.row)"
                      size="mini"
                      icon="el-icon-edit"
                      circle
                    ></el-button>
                    <el-button
                      @click="delete_user(info4.row.id)"
                      type="danger"
                      size="mini"
                      icon="el-icon-delete"
                      circle
                    ></el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </template>
        </el-table-column>

        <el-table-column prop="unitName" label="单位名称"></el-table-column>
        <el-table-column prop="address" label="单位地址"></el-table-column>
        <el-table-column prop="contacts" label="联系人"></el-table-column>
        <el-table-column prop="phone" label="联系电话"></el-table-column>
        <el-table-column prop="createDate" label="创建时间"></el-table-column>
        <el-table-column label="操作选项">
          <template slot-scope="info3">
            <el-button type="primary" @click="update_(info3.row)" icon="el-icon-edit" circle></el-button>
            <el-button type="danger" @click="delete_(info3.row.id)" icon="el-icon-delete" circle></el-button>
          </template>

          <!-- <el-button type="warning" icon="el-icon-more" circle></el-button> -->
        </el-table-column>
      </el-table>
    </el-card>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[3, 5, 10, 20]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>

    <!-- 点击弹出该単位下的用户数据框 -->
    <el-dialog
      title="修改用户信息"
      :visible.sync="dialogVisible_user"
      width="30%"
      @closed="user_up_close"
    >
      <el-form
        :rules="form_user_rules"
        ref="form_user_rules"
        label-position="right"
        label-width="80px"
        :model="form_user"
      >
        <el-form-item label="用户名称">
          <el-input v-model="form_user.username"></el-input>
        </el-form-item>

        <el-form-item label="分配权限">
          <el-select v-model="form_user.type" placeholder="请选择">
            <el-option
              v-for="item in roly"
              :key="item.id"
              :label="item.description"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <template v-if="pwd_lock">
          <el-form-item label="新密码" prop="new_password">
            <el-input type="password" show-password v-model="form_user.new_password"></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="new_s_password">
            <el-input type="password" show-password v-model="form_user.new_s_password"></el-input>
          </el-form-item>
        </template>

        <el-button type="info" size="mini" @click="pwd_sure" plain>修改密码</el-button>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible_user = false">取 消</el-button>
        <el-button type="primary" @click="update_user_s">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 点击弹出该単位下的用户数据框 -->
    <el-dialog title="修改单位信息" :visible.sync="dialogVisible_unit">
      <el-form label-position="right" label-width="80px" :model="form_unit">
        <el-form-item label="单位名称">
          <el-input v-model="form_unit.unitName"></el-input>
        </el-form-item>
        <el-form-item label="单位地址">
          <el-input v-model="form_unit.address"></el-input>
        </el-form-item>
        <el-form-item label="联系人">
          <el-input v-model="form_unit.contacts"></el-input>
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input v-model="form_unit.phone"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible_unit = false">取 消</el-button>
        <el-button type="primary" @click="update__unit">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 添加单位信息 -->
    <el-dialog title="添加单位信息" :visible.sync="dialogVisible_unit_add">
      <el-form label-position="right" label-width="80px" :model="form_unit">
        <el-form-item label="单位名称">
          <el-input v-model="form_unit.unitName"></el-input>
        </el-form-item>
        <el-form-item label="单位地址">
          <el-input v-model="form_unit.address"></el-input>
        </el-form-item>
        <el-form-item label="联系人">
          <el-input v-model="form_unit.contacts"></el-input>
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input v-model="form_unit.phone"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible_unit_add = false">取 消</el-button>
        <el-button type="primary" @click="update__unit_add">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 添加用户信息 -->
    <el-dialog title="添加用户信息" :visible.sync="dialogVisible_user_add" width="30%">
      <el-form label-position="right" ref="form_add" label-width="80px" :model="form_user_add">
        <el-form-item label="用户名称">
          <el-input v-model="form_user_add.username"></el-input>
        </el-form-item>
        <el-form-item label="用户密码">
          <el-input show-password type="password" v-model="form_user_add.password"></el-input>
        </el-form-item>

        <el-form-item label="选择单位">
          <!-- <el-input v-model="form_user_add.phone"></el-input> -->
          <el-select v-model="form_user_add.uId" clearable placeholder="请选择">
            <el-option
              v-for="item in tableData"
              :key="item.id"
              :label="item.unitName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择权限">
          <el-select v-model="form_user_add.type" placeholder="请选择">
            <el-option
              v-for="item in roly"
              :key="item.id"
              :label="item.description"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible_user_add = false">取 消</el-button>
        <el-button type="primary" @click="user_add">确 定</el-button>
      </span>
    </el-dialog>

    <!-- <el-dialog title="用户信息" :visible.sync="dialogVisible">
      <table width="100%" border="1" cellspacing="0" cellpadding="0">
        <tr>
          <th>用户名称</th>
          <th>权限分配</th>
          <th>创建时间</th>
          <th>操作用户</th>
        </tr>
        <tr :key="k" v-for="(item,k) in tableData_user">
          <td>{{ item.username }}</td>
          <td>
            <el-select @change="select_" v-model="item.type" placeholder="请选择">
              <el-option
                v-for="item in roly"
                :key="item.id"
                :label="item.description"
                :value="item.id"
              ></el-option>
            </el-select>
          </td>
          <td>{{ item.createDate}}</td>
          <td>
            <el-button type="primary" icon="el-icon-edit" circle></el-button>
            <el-button type="danger" icon="el-icon-delete" circle></el-button>
          </td>
        </tr>
        <tr></tr>
      </table>
      <span slot="footer" class="dialog-footer"></span>
    </el-dialog>-->
  </div>
</template>

<script>
import Qs from "qs";
export default {
  created() {
    this.one_table();
  },
  data() {
    return {
      // 单位信息
      tableData: [],
      // 单位下用户列表
      // tableData_user: [],
      // 权限数组
      roly: [],
      // 权限id
      // roly_id: "",
      page: {
        page: 1,
        rows: 10
      },
      total: 5,
      // 弹出框开关
      dialogVisible_unit: false,
      // 修改单位所需信息
      unit_obj: {},
      // 单位信息弹出框表单信息
      form_unit: {},
      // 用户弹出框
      dialogVisible_user: false,
      // 添加单位信息
      dialogVisible_unit_add: false,
      // 添加用户开关
      dialogVisible_user_add: false,
      // 用户编辑数据表单
      form_user: {},
      // 添加用户信息表
      form_user_add: {},
      // 修改密码框显示
      pwd_lock: false,
      // 用户密码编辑规则
      form_user_rules: {
        new_password: [
          // required:非空  message:错误提示  trigger:触发校验机制
          { required: true, message: "请输入新密码", trigger: "blur" }
        ],
        new_s_password: [
          { required: true, message: "再次输入密码", trigger: "blur" }
        ]
      }
    };
  },

  methods: {
    // 关闭之后隐藏修改密码
    user_up_close() {
      this.pwd_lock = false;
    },
    // 确认要修改用户密码
    pwd_sure() {
      this.pwd_lock = true;
    },
    // 点击确认按钮提交ajax添加用户
    async user_add() {
      var obj = this.form_user_add;
      obj.password = this.$md5(obj.password);
      let { data: res } = await this.$http.put("/user/add", obj);

      if (res.status == 0) {
        this.$message.success(`已成功添加`);
      } else {
        return this.$message.error("添加失败");
      }

      this.dialogVisible_user_add = false;
      this.form_user_add = {};
      this.one_table();
    },
    // 点击弹出新增用户窗口
    add_user() {
      this.dialogVisible_user_add = true;
    },
    // 点击删除用户信息
    async delete_user(id) {
      this.$confirm("此操作将永久删除该用户信息, 是否继续?", "删除用户信息", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          let { data: res } = await this.$http.delete(`/user/delete/${id}`);
          if (res.status != 0) return this.$message("删除失败");

          // 重新拉去数据
          this.one_table();
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    // 点击确认编辑提交请求
    async update_user_s() {
      if (this.form_user.new_password != this.form_user.new_s_password) {
        return this.$message.error("两次密码不一致");
      }
      if (this.pwd_lock) {
        this.form_user.password = this.$md5(this.form_user.new_s_password);
        this.$refs.form_user_rules.validate(async vali => {
          if (vali) {
            let { data: res } = await this.$http.put(
              "/user/update",
              this.form_user
            );
            if (res.status == 0) {
              this.$message.success("修改信息成功");
            } else {
              return this.$message.error("修改信息失败");
            }

            this.one_table();
            this.dialogVisible_user = false;
            this.form_user = {};
            this.pwd_lock = false;
            return;
          }
        });
      }

      if (!this.pwd_lock) {
        let { data: res } = await this.$http.put(
          "/user/update",
          this.form_user
        );
        if (res.status == 0) {
          this.$message.success("修改信息成功");
        } else {
          return this.$message.error("修改信息失败");
        }

        this.one_table();
        this.dialogVisible_user = false;
        this.form_user = {};
        this.pwd_lock = false;
      }
    },
    // 点击弹出修改用户信息的对话框
    update_user(obj) {
      console.log(obj);

      this.form_user = obj;

      this.dialogVisible_user = true;
    },
    // 编辑用户信息
    // update_user(obj) {
    //
    // },
    // 删除单位信息
    async delete_(id) {
      this.$confirm("此操作将永久删除该单位信息, 是否继续?", "删除单位信息", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          let { data: res } = await this.$http.delete(`/unit/delete/${id}`);
          if (res.status != 0) return this.$message("删除失败");

          // 重新拉去数据
          this.one_table();
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    // 点击确认按钮
    async update__unit_add() {
      let { data: res } = await this.$http.put("/unit/add", this.form_unit);
      this.$message.success("已添加");
      // 用完人家 编辑 的 表单记得清清除
      this.form_unit = {};
      // 关闭弹出框
      this.dialogVisible_unit_add = false;
      // 重新拉去数据
      this.one_table();
    },
    // 添加一个新单位信息
    async add_unit() {
      this.form_unit = {};
      this.dialogVisible_unit_add = true;
    },
    // 编辑完单位信息后提交表单
    async update__unit() {
      // put请求不需要 用qs 去序列化，
      let { data: res } = await this.$http.put("/unit/update", this.form_unit);
      if (res.status == 0) {
        this.$message.success("修改信息成功");
      } else {
        return this.$message.error("修改信息失败");
      }
      this.form_unit = {};

      this.dialogVisible_unit = false;
    },
    // 点击修改当前单位信息
    update_(obj) {
      // 这一步在赋值的 时候 id 也跟着赋值过去了 不用担心指定id的事
      this.form_unit = obj;
      this.dialogVisible_unit = true;
    },
    // 点击展开用户表格的时候 第一个参数是 当前行的数据
    async expand_(current_obj) {
      // 拿到单位id
      let id = current_obj.id;
      // 请求该单位下的用户表格数据
      let { data: res } = await this.$http.post(
        "/user/listByUnitId",
        Qs.stringify({ unitId: id })
      );
      // 将数据添加在当前的单位信息对象里边
      current_obj.user_list = res.rows;
      //

      // ajax之后将 表格显示
      setTimeout(() => {
        current_obj.lock = true;
      }, 500);
      // this.tableData_user = res.rows;
    },
    // 选择多少数据一页
    handleSizeChange(size) {
      this.page.rows = size;
      this.one_table();
    },
    // 当前在第几页
    handleCurrentChange(current) {
      this.page.page = current;
      this.one_table();
    },
    // 第一次加载数据 加载单位信息
    async one_table() {
      let { data: res } = await this.$http.post(
        "/unit/list",
        Qs.stringify(this.page)
      );
      let { data: res1 } = await this.$http("/ystyRole/list");
      this.roly = res1.datas;

      // 返回的总页数 赋值给 total
      this.total = res.total;
      // 添加一个字段用来控制 表格的显示
      res.rows.forEach(item => {
        item.lock = false;
      });
      // 存入data
      this.tableData = res.rows;
    }
  }
};
</script>

<style lang='less' scoped>
.btn_box {
  padding-right: 50px;
}

.el-table {
  margin-top: 20px;
}
</style>
